<script setup>
import { defineProps, ref } from 'vue';
import PostCard from './PostCard.vue';
import Pagination from './Pagination.vue';

const props = defineProps({
  posts: {
    type: Array,
    required: true
  },
  users: {
    type: Object,
    required: true
  },
  categories: {
    type: Array,
    required: true
  },
  activeCategory: {
    type: String,
    required: true
  }
});

const sortOption = ref('latest');
const currentPage = ref(1);
const postsPerPage = 5; // 每页显示5个帖子

const sortOptions = [
  { value: 'latest', label: 'Latest' },
  { value: 'popular', label: 'Most Popular' },
  { value: 'commented', label: 'Most Commented' }
];

// 根据选项排序帖子
const sortedPosts = () => {
  let sorted = [...props.posts];
  
  // 先按固定帖子排序
  sorted.sort((a, b) => {
    if (a.pinned && !b.pinned) return -1;
    if (!a.pinned && b.pinned) return 1;
    return 0;
  });
  
  // 然后根据排序选项排序
  switch (sortOption.value) {
    case 'latest':
      sorted.sort((a, b) => {
        const dateA = a.date ? new Date(a.date) : new Date(0);
        const dateB = b.date ? new Date(b.date) : new Date(0);
        return dateB - dateA;
      });
      break;
    case 'popular':
      sorted.sort((a, b) => {
        const likesA = a.likes || 0;
        const likesB = b.likes || 0;
        return likesB - likesA;
      });
      break;
    case 'commented':
      sorted.sort((a, b) => {
        const commentsA = a.comments || 0;
        const commentsB = b.comments || 0;
        return commentsB - commentsA;
      });
      break;
  }
  
  return sorted;
};

// 计算分页后的帖子
const paginatedPosts = () => {
  const start = (currentPage.value - 1) * postsPerPage;
  const end = start + postsPerPage;
  return sortedPosts().slice(start, end);
};

// 计算总页数
const totalPages = () => {
  return Math.ceil(props.posts.length / postsPerPage);
};

// 切换页码
const handlePageChange = (page) => {
  currentPage.value = page;
};
</script>

<template>
  <div class="posts-container">
    <div class="posts-header">
      <h3 class="posts-title">{{ 
        activeCategory === 'all' 
          ? '全部话题' 
          : categories.find(c => c.id === activeCategory)?.name || '未分类话题'
      }}</h3>
      <div class="sorting-controls">
        <span class="sort-label">排序方式:</span>
        <select v-model="sortOption" class="sort-dropdown">
          <option value="latest">最新发布</option>
          <option value="popular">最多点赞</option>
          <option value="commented">最多评论</option>
        </select>
      </div>
    </div>
    
    <!-- 无内容提示 -->
    <div v-if="paginatedPosts().length === 0" class="no-posts-message">
      暂无相关话题，请尝试其他分类或搜索条件
    </div>
    
    <div v-else class="posts-list">
      <PostCard 
        v-for="(post, index) in paginatedPosts()" 
        :key="post.id"
        :post="post"
        :users="users"
        :categories="categories"
        :style="{ animationDelay: `${index * 0.1}s` }"
      />
    </div>
    
    <Pagination 
      v-if="paginatedPosts().length > 0"
      :current-page="currentPage" 
      :total-pages="totalPages()"
      @page-change="handlePageChange"
    />
  </div>
</template>

<style scoped>
/* 帖子列表样式 */
.posts-container {
  flex-grow: 1;
}

.posts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.posts-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
}

.sorting-controls {
  display: flex;
  align-items: center;
}

.sort-label {
  color: #666;
  margin-right: 10px;
}

.sort-dropdown {
  padding: 8px 15px;
  border-radius: 5px;
  border: 1px solid #e0e0e0;
  background-color: #f8f8f8;
  cursor: pointer;
}

.posts-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (max-width: 576px) {
  .posts-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
}

.no-posts-message {
  text-align: center;
  padding: 40px 0;
  color: #666;
  font-size: 1.1rem;
  background-color: #f9f9f9;
  border-radius: 10px;
  margin: 20px 0;
}
</style> 